/* eslint jsx-a11y/no-noninteractive-element-interactions:0 */
import React, { PureComponent } from 'react';
import { Balloon, Icon } from '@icedesign/base';
import IceImg from '@icedesign/img';
import Layout from '@icedesign/layout';
import Menu from '@icedesign/menu';
import FoundationSymbol from 'foundation-symbol';
import cx from 'classnames';
import { Link } from 'react-router-dom';
import { headerMenuConfig } from '../../menuConfig';
import Logo from '../Logo';

export default class Header extends PureComponent {
  render() {
    const { profile, isMobile, theme, width, className, style } = this.props;
    return (
      <Layout.Header
        theme={theme}
        className={cx('ice-design-layout-header', className)}
        style={{ ...style, width }}
      >
        <Logo />
        <div
          className="ice-design-layout-header-menu"
          style={{ display: 'flex' }}
        >
          {/* Header 菜单项 begin */}
          {headerMenuConfig && headerMenuConfig.length > 0 ? (
            <Menu mode="horizontal" selectedKeys={[]}>
              {headerMenuConfig.map((nav, idx) => {
                const linkProps = {};
                if (nav.newWindow) {
                  linkProps.href = nav.path;
                  linkProps.target = '_blank';
                } else if (nav.external) {
                  linkProps.href = nav.path;
                } else {
                  linkProps.to = nav.path;
                }
                return (
                  <Menu.Item key={idx}>
                    {linkProps.to ? (
                      <Link {...linkProps}>
                        {nav.icon ? (
                          <FoundationSymbol type={nav.icon} size="small" />
                        ) : null}
                        {!isMobile ? nav.name : null}
                      </Link>
                    ) : (
                      <a {...linkProps}>
                        {nav.icon ? (
                          <FoundationSymbol type={nav.icon} size="small" />
                        ) : null}
                        {!isMobile ? nav.name : null}
                      </a>
                    )}
                  </Menu.Item>
                );
              })}
            </Menu>
          ) : null}
          {/* Header 菜单项 end */}

          {/* Header 右侧内容块:用户信息部分 */}

          {/*<Balloon*/}
            {/*trigger={*/}
              {/*<div*/}
                {/*className="ice-design-header-userpannel"*/}
                {/*style={{*/}
                  {/*display: 'flex',*/}
                  {/*alignItems: 'center',*/}
                  {/*fontSize: 12,*/}
                {/*}}*/}
              {/*>*/}
                {/*<IceImg*/}
                  {/*height={40}*/}
                  {/*width={40}*/}
                  {/*src={*/}
                    {/*profile.avatar ||*/}
                    {/*'https://img.alicdn.com/tfs/TB1L6tBXQyWBuNjy0FpXXassXXa-80-80.png'*/}
                  {/*}*/}
                  {/*className="user-avatar"*/}
                {/*/>*/}
                {/*<div className="user-profile">*/}
                  {/*<span className="user-name" style={{ fontSize: '13px' }}>*/}
                    {/*{profile.name}*/}
                  {/*</span>*/}
                  {/*<br />*/}
                  {/*<span*/}
                    {/*className="user-department"*/}
                    {/*style={{ fontSize: '12px', color: '#999' }}*/}
                  {/*>*/}
                    {/*{profile.department}*/}
                  {/*</span>*/}
                {/*</div>*/}
                {/*<Icon*/}
                  {/*type="arrow-down-filling"*/}
                  {/*size="xxs"*/}
                  {/*className="icon-down"*/}
                {/*/>*/}
              {/*</div>*/}
            {/*}*/}
            {/*closable={false}*/}
            {/*className="user-profile-menu"*/}
          {/*>*/}
            {/*<ul>*/}
              {/*<li className="user-profile-menu-item">*/}
                {/*<FoundationSymbol type="person" size="small" />我的主页*/}
              {/*</li>*/}
              {/*<li className="user-profile-menu-item">*/}
                {/*<FoundationSymbol type="repair" size="small" />设置*/}
              {/*</li>*/}
              {/*<li*/}
                {/*className="user-profile-menu-item"*/}
                {/*onClick={this.props.handleLogout}*/}
              {/*>*/}
                {/*<FoundationSymbol type="compass" size="small" />退出*/}
              {/*</li>*/}
            {/*</ul>*/}
          {/*</Balloon>*/}
        </div>
      </Layout.Header>
    );
  }
}
